<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>JavaScript--jQuery的事件 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">Expand all</a>
        <a onclick="go_top()">Back to top</a>
        <a onclick="go_bottom()">Go to bottom</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "Collapse all"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "Expand all"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">JavaScript--jQuery的事件</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">November 13, 2017&nbsp;&nbsp;22:15:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/JavaScript/">JavaScript</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <h3 id="什么是事件？"><a href="#什么是事件？" class="headerlink" title="什么是事件？"></a>什么是事件？</h3><p>页面对不同访问者的响应叫做事件。</p>
<p>事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。</p>
<p>实例：</p>
<p>在元素上移动鼠标 -&gt; 选取单选按钮 -&gt; 点击元素</p>
<p>在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。</p>
<p>常见 DOM 事件：</p>
<p><strong>鼠标事件：</strong></p>
<ul>
<li>click</li>
<li>dbclick</li>
<li>mouseenter</li>
<li>mouseleave</li>
</ul>
<p><strong>键盘事件</strong></p>
<ul>
<li>keypress</li>
<li>keydown</li>
<li>keyup</li>
</ul>
<p><strong>表单事件</strong></p>
<ul>
<li>submit</li>
<li>change</li>
<li>focus</li>
<li>blur</li>
</ul>
<h3 id="jQuery-事件方法语法"><a href="#jQuery-事件方法语法" class="headerlink" title="jQuery 事件方法语法"></a>jQuery 事件方法语法</h3><p>在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。</p>
<p>页面中指定一个点击事件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;p&quot;).click();</span><br></pre></td></tr></table></figure>

<p>下一步是定义什么时间触发事件。您可以通过一个事件函数实现：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;p&quot;).click(function()&#123;</span><br><span class="line">    &#x2F;&#x2F; 动作触发后执行的代码!!</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="常用的-jQuery-事件方法"><a href="#常用的-jQuery-事件方法" class="headerlink" title="常用的 jQuery 事件方法"></a>常用的 jQuery 事件方法</h3><p><strong>$(document).ready()</strong></p>
<p>$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。</p>
<p><strong>click()</strong></p>
<p>click() 方法是当按钮点击事件被触发时会调用一个函数。</p>
<p>该函数在用户点击 HTML 元素时执行。</p>
<p>在下面的实例中，当点击事件在某个 <code>&lt;p&gt;</code> 元素上触发时，隐藏当前的 <code>&lt;p&gt;</code>元素：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;p&quot;).click(function()&#123;</span><br><span class="line">  $(this).hide();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>dblclick()</strong></p>
<p>当双击元素时，会发生 dblclick 事件。</p>
<p>dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;p&quot;).dblclick(function()&#123;</span><br><span class="line">  $(this).hide();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>mouseenter()</strong></p>
<p>当鼠标指针穿过元素时，会发生 mouseenter 事件。</p>
<p>mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#p1&quot;).mouseenter(function()&#123;</span><br><span class="line">    alert(&#39;您的鼠标移到了 id&#x3D;&quot;p1&quot; 的元素上!&#39;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>mouseleave()</strong></p>
<p>当鼠标指针离开元素时，会发生 mouseleave 事件。</p>
<p>mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#p1&quot;).mouseleave(function()&#123;</span><br><span class="line">    alert(&quot;再见，您的鼠标离开了该段落。&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>mousedown()</strong></p>
<p>当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。</p>
<p>mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#p1&quot;).mousedown(function()&#123;</span><br><span class="line">    alert(&quot;鼠标在该段落上按下！&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>mouseup()</strong></p>
<p>当在元素上松开鼠标按钮时，会发生 mouseup 事件。</p>
<p>mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#p1&quot;).mouseup(function()&#123;</span><br><span class="line">	alert(&quot;鼠标在段落上松开。&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>hover()</strong></p>
<p>hover()方法用于模拟光标悬停事件。</p>
<p>当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#p1&quot;).hover(</span><br><span class="line">    function()&#123;</span><br><span class="line">        alert(&quot;你进入了 p1!&quot;);</span><br><span class="line">    &#125;,</span><br><span class="line">    function()&#123;</span><br><span class="line">        alert(&quot;拜拜! 现在你离开了 p1!&quot;);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p><strong>focus()</strong></p>
<p>当元素获得焦点时，发生 focus 事件。</p>
<p>当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。</p>
<p>focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;input&quot;).focus(function()&#123;</span><br><span class="line">  $(this).css(&quot;background-color&quot;,&quot;#cccccc&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>blur()</strong></p>
<p>当元素失去焦点时，发生 blur 事件。</p>
<p>blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;input&quot;).blur(function()&#123;</span><br><span class="line">  $(this).css(&quot;background-color&quot;,&quot;#ffffff&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2017/11/13/JavaScript--jQuery%E7%9A%84%E4%BA%8B%E4%BB%B6/">https://zhangpingv5.gitee.io/2017/11/13/JavaScript--jQuery%E7%9A%84%E4%BA%8B%E4%BB%B6/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/jQuery/"># jQuery</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2017/12/12/JavaScript--es6/">JavaScript--es6</a>
            
            
            <a class="next" rel="next" href="/2017/11/12/JavaScript--jQuery%E7%9A%84%E8%AF%AD%E6%B3%95/">JavaScript--jQuery的语法</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
